<template>
  <layout-body>
    <!-- 列表 -->
    <el-table v-loading="initLoading" class="mt20" :data="lists" row-key="id">
      <el-table-column type="selection" width="30" />
      <el-table-column label="用户信息" prop="nickName">
        <template #default="scope">
          <userBox
            :avatar="scope.row.avatar"
            :nickName="scope.row.nickName"
            :id="scope.row.id"
          ></userBox>
        </template>
      </el-table-column>
      <el-table-column label="用户余额" align="center" prop="balance">
        <template #default="scope">
          <span>{{ scope.row.balance }}</span>
        </template></el-table-column
      >
      <el-table-column label="可用积分" align="center" prop="integral">
        <template #default="scope">
          <span>{{ scope.row.integral }}</span>
        </template></el-table-column
      >
      <el-table-column label="累计消费金额" align="center">
        <template #default="scope">
          <span>{{ scope.row.balance }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分组" prop="create_time">
        <template #default="scope">
          <span v-if="scope.row.group_id">{{ scope.row.group_name }}</span>
          <span class="text-grey fz12" v-else>无</span>
        </template></el-table-column
      >
      <el-table-column label="注册来源" prop="create_time" align="center">
        <template #default="scope">
          <span>{{ scope.row.register_source.name }}</span>
        </template></el-table-column
      >
      <el-table-column label="注册时间" prop="create_time">
        <template #default="scope">
          <span class="text-grey fz12">{{ scope.row.create_time }}</span>
        </template></el-table-column
      >
      <el-table-column align="left" label="操作" width="120">
        <template #default="scope">
          <div class="flex items-center">
            <el-button
              link
              type="primary"
              @click="toDetail(scope.row.id)"
              >详细</el-button
            >
            <el-dropdown>
              <el-button link type="primary" class="ml10"
                >更多<span class="icon icon-gengduo"></span
              ></el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <div v-permission="'user-user-update_group'">
                    <el-dropdown-item
                      @click="updateGroup(scope.row.id, scope.row.group_id)"
                      >设置分组</el-dropdown-item
                    >
                  </div>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="flex end">
      <page :listPage="listPage" @change="pageChange"></page>
    </div>

    <userUpdateGroup
      ref="userUpdateGroupRef"
      @success="toInit"
    ></userUpdateGroup>

    <userDetail ref="userDetailRef"></userDetail>
  </layout-body>
</template>



<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { getUserList } from "@/api/user/index";
import { listPageType, Result, ResultError } from "@/types";
import { useConfig } from "@/store";
import userUpdateGroup from "./update-group.vue";
import userDetail from "@/components/user/detail.vue";
import userBox from "@/components/user/box.vue";

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const lists = ref<any>();

const toInit = () => {
  initLoading.value = true;
  let obj: any = {};
  obj.page = listPage.value.page;
  obj.limit = listPage.value.limit;
  getUserList(obj)
    .then((res: Result) => {
      lists.value = res.data.data;
      listPage.value.total = res.data.total;
      setTimeout(() => {
        initLoading.value = false;
      }, 300);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const listPage = ref<listPageType>({
  total: 0,
  limit: useConfig().getPageLimit,
  page: 1,
});

const pageChange = (res: listPageType) => {
  listPage.value = res;
  toInit();
};

const userUpdateGroupRef = ref<HTMLElement>();

// 设置分组
const updateGroup = (id: number, groupId: number) => {
  proxy?.$refs["userUpdateGroupRef"].open(id, groupId);
};

const userDetailRef = ref<HTMLElement>();

// 查看详细
const toDetail = (id: number) => {
  proxy?.$refs["userDetailRef"].open(id);
};

onMounted(() => {
  toInit();
});
</script>